<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="http://code.highcharts.com/highcharts.js"></script>
	<script src="/statics/highcharts/js/modules/exporting.js"></script>
</head>
<body>
<style>
.user_list li{
	list-style: none;
	float: left;
	margin-left: 20px;
}
</style>
	<ul class="user_list">
	<volist name="list" id="vo">
		<li><a href="{:U('Lol/user/$vo['id']')}">{$vo.account}</a></li>
	</volist>
	</ul>
	<br>
	<div id="container" style="min-width:800px;height:400px"></div>

<script>
$(function () {                                                                
    $('#container').highcharts({                                           
        chart: {                                                           
            type: 'bar'                                                    
        },                                                                 
        title: {                                                           
            text: 'LOL战斗力排行榜'                    
        },                                                                 
        subtitle: {                                                        
            text: '{:date('Y-m-d',time())}'                                  
        },                                                                 
        xAxis: {                                                           
            categories: [{$account}],
            title: {                                                       
                text: null                                                 
            }                                                              
        },                                                                 
        yAxis: {                                                           
            min: 0,                                                        
            title: {                                                       
                text: '战斗力',                             
                align: 'high'                                              
            },                                                             
            labels: {                                                      
                overflow: 'justify'                                        
            }                                                              
        },                                                                 
        tooltip: {                                                         
            valueSuffix: ' 战斗力'                                       
        },                                                                 
        plotOptions: {                                                     
            bar: {                                                         
                dataLabels: {                                              
                    enabled: true                                          
                }                                                          
            }                                                              
        },                                                                 
        legend: {                                                          
            layout: 'vertical',                                            
            align: 'right',                                                
            verticalAlign: 'top',                                          
            x: -40,                                                        
            y: 100,                                                        
            floating: true,                                                
            borderWidth: 1,                                                
            backgroundColor: '#FFFFFF',                                    
            shadow: true                                                   
        },                                                                 
        credits: {                                                         
            enabled: false                                                 
        },                                                                 
        series: [{                                                         
            name: '{:date('Y-m-d',time())}',                                             
            data: [{$data}]                                   
        }]                                                                 
    });                                                                    
});          
</script>
</body>
</html>